﻿html {
font: normal 14px/20px Aller,sans-serif;
color: #000;}
      
body {
background-image: url('../Images/bg_body_grid.png');
background-repeat: repeat;
margin: 0 auto;}
      
@font-face {
font-family: bebas;
src: url("../fonts/BebasNeue.eot"); /* FOR IEs */
src: local('bebas'), url('../Fonts/BebasNeue.ttf') format('truetype'); /* for other web browsers */}
      
#header {
color:#fff;
font-family: bebas, Aller, Sans-Serif;
font-size: 44pt;
background-image: url('../Images/bg_carbon_fibre.png');
background-repeat: repeat;
background-color: #000;
border-bottom: solid 1px #d9d9d9;
margin :0 auto;
position: static;
display: block;}

#header span {
margin:0 auto;
padding:10px;}
         
.wrap {
width: 940px;
margin: 0 auto;
position: relative;
padding: 87px 31px;}
       
.title {
font-family: bebas, Aller, Sans-Serif;
font-size: 30pt;}

#login {
width: 310px;
display: block;
margin: 0 auto;
padding: 87px 31px;}

.textbox {
padding: 8px;  
border: solid 1px #E5E5E5;  
outline: 0;  
width: 200px;  
background: #FFFFFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;}

.textbox:focus {
-webkit-box-shadow: rgba(25, 159, 196, 0.3) 0px 0px 8px;}
          
.textbox-label {
margin-right: 10px;
font-size:11pt;
font-weight:bold;}

#Login1_UserNameRequired, #Login1_PasswordRequired {
color:#f00;
font-weight:bold;
font-size:12pt;}

#Login1_LoginButton {
    background-position: initial;
    color:#fff;
    text-shadow:0px 1px #000;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    padding-left: 90px;
    padding-right: 105px;
    height: 50px;
    display: inline-block;
    position: relative;
    border: 1px solid #077AA6;
    -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    float: left;
    clear: both;
    margin: 10px 0px;
    overflow: hidden;
    -webkit-transition: box-shadow 0.3s ease-in-out;
    -moz-transition: box-shadow 0.3s ease-in-out;
    -o-transition: box-shadow 0.3s ease-in-out;
    transition: box-shadow 0.3s ease-in-out;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A8CB5', endColorstr='#077AA6');
    background-image: -webkit-linear-gradient(top, rgb(25, 159, 196) 0%, rgb(10, 140, 181) 100%);
    background-image: -moz-linear-gradient(top, rgb(25, 159, 196) 0%, rgb(10, 140, 181) 100%);
    background-repeat: repeat;
}

#Login1_LoginButton:hover {
box-shadow: 0px 1px 1px rgba(255,255,255,0.8) inset, 
            1px 1px 5px rgba(0,0,0,0.4); 
}

#Login1_LoginButton:active {
position: relative;
top: 1px;
background: #077AA6;
box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
border-color: #199FC4;
}

a {
text-decoration:none;
color:#42B2DD;}
   
.r-link {
display: inline-block;
overflow: hidden;
vertical-align: top;

-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;

-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;}
         
.r-link:hover {
text-decoration:none;}

.r-link span {
display: block;
position: relative;
padding: 0 2px;

-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
    
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
    
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;}
              
.r-link:hover span {
background: #42B2DD;     

-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );}
                    
.r-link span:after {
content: attr(data-title);

display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 2px;

color: #fff;
background: #42B2DD;

-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;

-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );}